<template>
  <div class="order">
    <div class="trade-resume">
      <div class="van-ellipsis">{{order.order_no}}</div>
      <h1 class="price-cny">{{formatPrice()}}</h1>
      <div class="van-ellipsis">{{order.name}}</div>
    </div>

    <div class="trade-countdown">
      <van-circle
        v-model="currentRate"
        :rate="rate"
        :speed="100"
        :text="text"
        size="60px"
        layer-color="#eee"
        :clockwise="false"
      />
      <div class="rest-time">支付剩余时间</div>
    </div>

    <van-radio-group v-model="radio" class="mt10 paymode">
      <van-cell-group>
        <van-cell
          v-for="(item,index) in list"
          clickable
          :key="index"
          :icon="item.icon"
          :label="item.desc"
          :title="item.name"
          @click="toggle(index)"
        >
          <van-radio :name="item.id" ref="radio"/>
        </van-cell>
      </van-cell-group>
    </van-radio-group>

    <van-submit-bar class="abound-submit-bar"
      button-text="立即支付"
      @submit="onSubmit"
    />
  </div>
</template>
<script>
import {
  Tag,
  Col,
  Circle,
  Icon,
  Cell,
  CellGroup,
  RadioGroup,
  Radio,
  Card,
  Button,
  Checkbox,
  CheckboxGroup,
  Panel,
  NoticeBar,
  SubmitBar
} from 'vant'
import { formatRestFixedTime } from '../../common/util'

const PERIOD_TIME = 600

export default {
  components: {
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Circle.name]: Circle,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Panel.name]: Panel,
    [Card.name]: Card,
    [Button.name]: Button,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [NoticeBar.name]: NoticeBar,
    [SubmitBar.name]: SubmitBar
  },
  data () {
    return {
      currentRate: 100,
      order: {
        name: '综合订单购买花色等4件商品综合订单购买花色等4件商品',
        order_no: '19878433654232',
        amount: 100,
        expireTime: 1535010500000,
        effectiveTime: 60
      },
      radio: 2,
      list: [
        {
          id: 1,
          name: '微信支付',
          desc: '亿万用户的选择，更快更安全',
          icon: 'wechat'
        },
        {
          id: 2,
          name: '支付宝',
          desc: '亿万用户的选择，更快更安全',
          icon: 'alipay'
        }
      ]
    }
  },
  created () {
    // this.axios
    //   .get('/trade/unified/:id')
    //   .then(response => {

    //   })
    //   .catch(function (error) {
    //     console.log(error)
    //   })

    this.currentRate = this.order.effectiveTime / PERIOD_TIME * 100
  },
  watch: {
    $route (to, from) {
      let isBack = this.$router.isBack //  监听路由变化时的状态为前进还是后退
      if (isBack) {
        console.log('isback')
        alert('isback')
      } else {
        console.log('noback')
        alert('noback')
      }
      this.$router.isBack = false
    }
  },
  mounted () {
    this.countDown()
  },
  computed: {
    text () {
      return formatRestFixedTime(this.order.effectiveTime)
    },
    rate () {
      return this.order.effectiveTime / PERIOD_TIME * 100
    }
  },
  methods: {
    format () {
      return formatRestFixedTime(this.order.effectiveTime)
    },
    formatPrice () {
      return this.order.amount.toFixed(2)
    },
    onSubmit () {
      this.axios
        .get('/site/index')
        .then(response => {
          this.msg = response.data.msg
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    toggle (index) {
      console.log(this.$refs.radio[index].name)
      this.radio = this.$refs.radio[index].name
    },
    countDown () {
      var _this = this
      var timer = setInterval(function () {
        _this.order.effectiveTime--
        if (_this.order.effectiveTime <= 0) {
          clearInterval(timer)
        }
      }, 1000)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.trade-resume {
  text-align: center;
  background: #fff;
  padding: 15px;
  color: #a2a2a2;
  font-weight: 300;
  .rest-time {
    font-size: 14px;
  }
  .order-info {
    font-size: 10px;
    span {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }
  }
  h1 {
    color: #000;
  }
}
.trade-countdown {
  background: #fff;
  margin-top: 1px;
  text-align: center;
  padding: 20px;
}

.order-panel /deep/ .van-panel__header {
  font-size: 0.2rem;
}
.order-panel /deep/ .van-cell__title {
  flex: 2;
  -webkit-box-flex: 2;
  text-transform: uppercase;
}
.order-panel /deep/ .van-panel__footer {
  font-size: 0.2rem;
}
.order-panel /deep/ .van-panel__footer a {
  color: #42b983;
}
.order-amount {
  text-align: left;
  padding-left: 0.3rem;
  font-size: 0.24rem;
}
.order-amount .price {
  color: #ff6600;
  font-size: 0.4rem;
}
.order-amount small {
  padding-left: 0.1rem;
  font-size: 85%;
  color: #aaa;
}
</style>
